{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

.page-title p {
    color: #666 !important;
    margin: 0.25rem 0 0 0;
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.card-body {
    position: relative;
    z-index: 1;
}

/* 液态玻璃表单标签 */
.form-label {
    color: #1C1C1E !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}

/* 液态玻璃表单控件 */
.form-control, .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #1C1C1E !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.form-control::before, .form-select::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 0 0 0.2rem rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
    color: #1C1C1E !important;
}

.form-control:focus::before, .form-select:focus::before {
    opacity: 1;
}

.form-control::placeholder {
    color: rgba(28, 28, 30, 0.6) !important;
}

/* 液态玻璃按钮 */
.btn-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #1C1C1E !important;
}

.btn-primary:hover::before {
    opacity: 1;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .page-title p {
    color: #bdc3c7 !important;
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-label {
    color: #ffffff !important;
}

[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .btn-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-primary::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

[data-theme="dark"] .btn-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* 下拉菜单样式修复 */
.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    margin-top: 0.125rem !important;
}

.dropdown-item {
    color: #1C1C1E !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border: none !important;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    transform: translateX(2px);
}

.dropdown-item:active {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.dropdown-divider {
    margin: 0.5rem 0 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 暗色主题下的下拉菜单 */
[data-theme="dark"] .dropdown-menu {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .dropdown-item {
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-item:active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 确保下拉按钮样式正确 */
.btn-outline-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
    transform: translateY(-1px);
}

[data-theme="dark"] .btn-outline-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* 自定义机器人选择器样式 */
.robot-selection-container {
    position: relative;
    width: 100%;
}

.robot-selection-button {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #1C1C1E;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.robot-selection-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.robot-selection-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.robot-selection-button:hover::before {
    opacity: 1;
}

.robot-selection-button.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.robot-selection-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-top: 0.125rem;
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.robot-selection-panel.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.robot-option {
    padding: 0.75rem 1rem;
    color: #1C1C1E;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    margin: 0.125rem;
    display: flex;
    align-items: center;
}

.robot-option:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(2px);
}

.robot-option.selected {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

.robot-option.selected .robot-icon {
    color: #007AFF;
}

.robot-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0.5rem 0;
}

/* 暗色主题下的机器人选择器 */
[data-theme="dark"] .robot-selection-button {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .robot-selection-button:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

[data-theme="dark"] .robot-selection-button.active {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .robot-selection-panel {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .robot-option {
    color: #ffffff;
}

[data-theme="dark"] .robot-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] .robot-option.selected {
    background: rgba(0, 122, 255, 0.2);
    color: #007AFF;
}

[data-theme="dark"] .robot-divider {
    background: rgba(255, 255, 255, 0.1);
}

/* @人配置样式 */
.robot-at-config {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.robot-at-config:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.robot-at-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.robot-at-config-title {
    font-weight: 600;
    color: #1C1C1E;
    display: flex;
    align-items: center;
}

.robot-at-config-title i {
    margin-right: 0.5rem;
    color: #007AFF;
}

.robot-at-config-input {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #1C1C1E;
    transition: all 0.3s ease;
    width: 100%;
}

.robot-at-config-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.robot-at-config-input::placeholder {
    color: rgba(28, 28, 30, 0.6);
}

/* 暗色主题下的@人配置 */
[data-theme="dark"] .robot-at-config {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .robot-at-config:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .robot-at-config-title {
    color: #ffffff;
}

[data-theme="dark"] .robot-at-config-input {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .robot-at-config-input:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .robot-at-config-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
</style>

<!-- 页面标题 -->
<div class="page-title">
    <h2><i class="fas fa-edit me-1"></i>编辑定时任务</h2>
    <p>修改任务配置，更新执行计划和关联脚本</p>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-clock me-2"></i>任务配置 - {{ task.name }}
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('edit_task', task_id=task.id) }}">
                    <div class="mb-3">
                        <label for="name" class="form-label">
                            <i class="fas fa-tag me-1"></i>任务名称
                        </label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ task.name }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="cron_expression" class="form-label">
                            <i class="fas fa-calendar-alt me-1"></i>Cron表达式
                        </label>
                        <input type="text" class="form-control" id="cron_expression" name="cron_expression" value="{{ task.cron_expression }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="script_path" class="form-label">
                            <i class="fas fa-file-code me-1"></i>执行脚本
                        </label>
                        <select class="form-select" id="script_path" name="script_path" required>
                            <option value="">-- 选择脚本 --</option>
                            {% for script in scripts %}
                            <option value="{{ script.path }}" {% if script.path == task.script_path %}selected{% endif %}>{{ script.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="robot_ids" class="form-label">
                            <i class="fas fa-robot me-1"></i>关联机器人
                        </label>
                        <div class="robot-selection-container">
                            <div class="robot-selection-button" id="robotSelectionButton">
                                <span id="selectedRobotsText">选择机器人</span>
                                <i class="fas fa-chevron-down ms-2"></i>
                            </div>
                            <div class="robot-selection-panel" id="robotSelectionPanel">
                                <div class="robot-option" data-value="none">
                                    <i class="fas fa-times me-2"></i>不关联机器人
                                </div>
                                <div class="robot-divider"></div>
                                {% for robot in robots %}
                                <div class="robot-option" data-value="{{ robot.id }}" data-robot-name="{{ robot.name }}" data-robot-tag="{{ robot.tag }}">
                                    <i class="fas fa-circle me-2 robot-icon"></i>{{ robot.name }} ({{ robot.tag }})
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <input type="hidden" id="robot_ids" name="robot_ids" value="{{ task.robot_ids|join(',') if task.robot_ids else '' }}">
                        <div class="form-text">
                            <i class="fas fa-info-circle me-1"></i>点击选择机器人，可多选，任务执行时会向所有选中的机器人发送消息
                        </div>
                    </div>
                    
                    <!-- @人配置区域 -->
                    <div class="mb-3" id="atPersonsSection" style="display: none;">
                        <label class="form-label">
                            <i class="fas fa-at me-1"></i>@人配置
                        </label>
                        <div id="robotAtConfigs">
                            <!-- 动态生成的机器人@人配置 -->
                        </div>
                        <div class="form-text">
                            <i class="fas fa-info-circle me-1"></i>为每个机器人配置需要@的人员手机号，多个手机号用逗号分隔，留空表示不@任何人
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="params" class="form-label">
                            <i class="fas fa-cogs me-1"></i>任务参数 (JSON格式)
                        </label>
                        <textarea class="form-control" id="params" name="params" rows="3" placeholder="例如: {\"key\": \"value\"}">{{ task.params if task.params else '' }}</textarea>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>保存修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const robotSelectionButton = document.getElementById('robotSelectionButton');
    const robotSelectionPanel = document.getElementById('robotSelectionPanel');
    const selectedRobotsText = document.getElementById('selectedRobotsText');
    const robotIdsInput = document.getElementById('robot_ids');
    const robotOptions = document.querySelectorAll('.robot-option');
    const atPersonsSection = document.getElementById('atPersonsSection');
    const robotAtConfigs = document.getElementById('robotAtConfigs');
    
    let selectedRobots = [];
    let robotAtConfigsData = {}; // 存储每个机器人的@人配置
    
    // 从后端传递的数据中获取@人配置
    function extractAtConfigsFromTask() {
        try {
            const robotAtConfigsStr = '{{ robot_at_configs|tojson if robot_at_configs else "{}" }}';
            return JSON.parse(robotAtConfigsStr);
        } catch (e) {
            console.warn('解析@人配置失败:', e);
        }
        return {};
    }
    
    // 生成@人配置HTML
    function generateAtConfigHTML(robotId, robotName, robotTag) {
        return `
            <div class="robot-at-config" data-robot-id="${robotId}">
                <div class="robot-at-config-header">
                    <div class="robot-at-config-title">
                        <i class="fas fa-robot"></i>
                        ${robotName} (${robotTag})
                    </div>
                </div>
                <input type="text" 
                       class="robot-at-config-input" 
                       name="robot_at_${robotId}" 
                       placeholder="请输入手机号，多个手机号用逗号分隔，如：13800138000,13900139000"
                       value="${robotAtConfigsData[robotId] || ''}"
                       data-robot-id="${robotId}">
            </div>
        `;
    }
    
    // 更新@人配置区域
    function updateAtConfigsSection() {
        if (selectedRobots.length === 0) {
            atPersonsSection.style.display = 'none';
            robotAtConfigs.innerHTML = '';
            return;
        }
        
        atPersonsSection.style.display = 'block';
        robotAtConfigs.innerHTML = '';
        
        selectedRobots.forEach(robotId => {
            const robotOption = document.querySelector(`.robot-option[data-value="${robotId}"]`);
            if (robotOption) {
                const robotName = robotOption.getAttribute('data-robot-name');
                const robotTag = robotOption.getAttribute('data-robot-tag');
                const configHTML = generateAtConfigHTML(robotId, robotName, robotTag);
                robotAtConfigs.insertAdjacentHTML('beforeend', configHTML);
            }
        });
        
        // 重新绑定输入框事件
        bindAtConfigInputEvents();
    }
    
    // 绑定@人配置输入框事件
    function bindAtConfigInputEvents() {
        const atConfigInputs = document.querySelectorAll('.robot-at-config-input');
        atConfigInputs.forEach(input => {
            input.addEventListener('input', function() {
                const robotId = this.getAttribute('data-robot-id');
                robotAtConfigsData[robotId] = this.value;
            });
        });
    }
    
    // 初始化已选中的机器人和@人配置
    const initialRobotIds = robotIdsInput.value;
    if (initialRobotIds) {
        selectedRobots = initialRobotIds.split(',').map(id => parseInt(id.trim()));
        
        // 更新显示文本和选中状态
        const selectedNames = [];
        robotOptions.forEach(option => {
            const optionId = parseInt(option.getAttribute('data-value'));
            if (selectedRobots.includes(optionId)) {
                selectedNames.push(option.textContent.trim());
                option.classList.add('selected');
                const icon = option.querySelector('i');
                if (icon) {
                    icon.className = 'fas fa-check-circle me-2';
                }
            }
        });
        selectedRobotsText.textContent = selectedNames.join(', ');
        
        // 初始化@人配置数据
        robotAtConfigsData = extractAtConfigsFromTask();
    } else {
        selectedRobotsText.textContent = '不关联机器人';
    }
    
    // 切换选择面板显示
    robotSelectionButton.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const isOpen = robotSelectionPanel.classList.contains('show');
        if (isOpen) {
            robotSelectionPanel.classList.remove('show');
            robotSelectionButton.classList.remove('active');
        } else {
            robotSelectionPanel.classList.add('show');
            robotSelectionButton.classList.add('active');
        }
    });
    
    // 处理机器人选择
    robotSelectionPanel.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const target = e.target.closest('.robot-option');
        if (!target) return;
        
        const value = target.getAttribute('data-value');
        
        if (value === 'none') {
            // 选择"不关联机器人"
            selectedRobots = [];
            selectedRobotsText.textContent = '不关联机器人';
            robotIdsInput.value = '';
            robotAtConfigsData = {};
            
            // 重置所有机器人选项的选中状态
            robotOptions.forEach(option => {
                option.classList.remove('selected');
                const icon = option.querySelector('i');
                if (icon) {
                    icon.className = 'fas fa-circle me-2 robot-icon';
                }
            });
        } else {
            // 选择机器人
            const robotId = parseInt(value);
            
            if (selectedRobots.includes(robotId)) {
                // 取消选择
                selectedRobots = selectedRobots.filter(id => id !== robotId);
                target.classList.remove('selected');
                const icon = target.querySelector('i');
                if (icon) {
                    icon.className = 'fas fa-circle me-2 robot-icon';
                }
                // 删除该机器人的@人配置
                delete robotAtConfigsData[robotId];
            } else {
                // 选择机器人
                selectedRobots.push(robotId);
                target.classList.add('selected');
                const icon = target.querySelector('i');
                if (icon) {
                    icon.className = 'fas fa-check-circle me-2';
                }
            }
            
            // 更新显示文本
            if (selectedRobots.length === 0) {
                selectedRobotsText.textContent = '选择机器人';
                robotIdsInput.value = '';
            } else {
                const selectedNames = [];
                robotOptions.forEach(option => {
                    const optionId = parseInt(option.getAttribute('data-value'));
                    if (selectedRobots.includes(optionId)) {
                        selectedNames.push(option.textContent.trim());
                    }
                });
                selectedRobotsText.textContent = selectedNames.join(', ');
                robotIdsInput.value = selectedRobots.join(',');
            }
        }
        
        // 更新@人配置区域
        updateAtConfigsSection();
    });
    
    // 点击外部关闭选择面板
    document.addEventListener('click', function(e) {
        if (!robotSelectionButton.contains(e.target) && !robotSelectionPanel.contains(e.target)) {
            robotSelectionPanel.classList.remove('show');
            robotSelectionButton.classList.remove('active');
        }
    });
    
    // 表单提交前处理@人配置数据
    document.querySelector('form').addEventListener('submit', function(e) {
        // 收集所有@人配置数据
        const atConfigsInput = document.createElement('input');
        atConfigsInput.type = 'hidden';
        atConfigsInput.name = 'robot_at_configs';
        atConfigsInput.value = JSON.stringify(robotAtConfigsData);
        this.appendChild(atConfigsInput);
    });
    
    // 初始化@人配置区域
    updateAtConfigsSection();
    
    // 调试信息
    console.log('自定义机器人选择器初始化完成');
    console.log('可用机器人数量:', robotOptions.length);
    console.log('初始选中的机器人:', selectedRobots);
    console.log('初始@人配置:', robotAtConfigsData);
});
</script>
{% endblock %}